<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
</head>

<body layadmin-themealias="default">
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body" pad15="">
            <div class="layui-form" wid100="" lay-filter="">
              <div class="layui-form-item">
                <label class="layui-form-label">{:Lang('anchor_id')}</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input type="text" name="anchorid" value="" class="layui-input" lay-verify="required|number" />
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">{:Lang('live_category')}</label>
                <div class="layui-input-inline">
                  <select id="categoryid" name="categoryid" lay-filter="categoryid" lay-verify="required">
                    <option value="">{:Lang('choose')}</option>
                    {volist name="categorys" id="vo"}
                    <option value="{$vo.id}">{$vo.title}</option>
                    {/volist}
                  </select>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">{:Lang('live_title')}</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input type="text" name="title" value="" class="layui-input" placeholder="{:Lang('live_title')}"
                    lay-verify="required" />
                </div>
              </div>
              <div class="layui-form-item" id="img1">
                <label class="layui-form-label">{:Lang('live_cover_h')}</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input name="thumb" lay-verify="required" id="LAY_iconImgSrc" placeholder="{:Lang('live_cover_url')}"
                    value="" class="layui-input" />
                </div>
                <div class="layui-input-inline layui-btn-container" style="width: auto">
                  <button type="button" class="layui-btn layui-btn-primary" id="LAY_iconImgUpload">
                    <i class="layui-icon">&#xe67c;</i>{:Lang('upload_picture')}
                  </button>
                  <button class="layui-btn layui-btn-primary" layadmin-event="coverImgPreview">
                    {:Lang('preview_picture')}
                  </button>
                </div>
              </div>
              <div class="layui-form-item imgy">
                <label class="layui-form-label">{:Lang('live_cover_v')}</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input name="thumb_y" id="LAY_iconImgSrc2" placeholder="{:Lang('live_cover_url')}" value=""
                    class="layui-input" />
                </div>
                <div class="layui-input-inline layui-btn-container" style="width: auto">
                  <button type="button" class="layui-btn layui-btn-primary" id="LAY_iconImgUpload2">
                    <i class="layui-icon">&#xe67c;</i>{:Lang('upload_picture')}
                  </button>
                  <button class="layui-btn layui-btn-primary" layadmin-event="coverImgPreview">
                    {:Lang('preview_picture')}
                  </button>
                </div>
              </div>
              <div class="layui-form-item sport">
                <label class="layui-form-label">{:Lang('choose_event')}</label>
                <div class="layui-input-inline" style="width: 400px">
                  <select name="matchid" id="matchid" lay-filter="matchid" disabled="disabled" lay-search="">
                    <option value="">{:Lang('enter_title_to_search')}</option>
                  </select>
                </div>
              </div>

              <div class="layui-form-item">
                <label id="pull_label" class="layui-form-label">{:Lang('stream_url')}</label>
                <div class="layui-input-inline" style="width: 400px">
                  <input name="pull_url" lay-verify="required|pullUrl" id="LAY_videoSrc"
                    placeholder="{:Lang('stream_url')}" value="" class="layui-input" />
                </div>
                <div class="layui-input-inline layui-btn-container" style="width: auto">

                  <button class="layui-btn layui-btn-primary" style="color:red" layadmin-event="upVideoPreview">
                    {:Lang('preview_video_only_supp')}
                  </button>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">{:Lang('play_from_source')}</label>
                <div class="layui-input-block">
                  <input type="radio" value="1" name="play_from_source" title="{:Lang('enable')}" checked />
                  <!-- <input type="radio" value="0" name="play_from_source" title="关闭"  /> -->
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">{:Lang('is_replay_video')}</label>
                <div class="layui-input-block">
                  <input type="radio" value="1" name="reply_video" title="{:Lang('enable')}" checked />
                  <!-- <input type="radio" value="0" name="reply_video" title="关闭"  /> -->
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">{:Lang('watermark_position')}</label>
                <div class="layui-input-block">
                  <input type="radio" value="l" name="watermark_position" title="{:Lang('left')}" />
                  <input type="radio" value="r" name="watermark_position" title="{:Lang('right')}" checked />
                  <input type="radio" value="n" name="watermark_position" title="{:Lang('none')}" />
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block text-center">
                  <button class="layui-btn" lay-submit="" lay-filter="live-add">
                    {:Lang('submit')}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="/layuiadmin/layui/layui.js"></script>
  <script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="/assets/vod-js-sdk-v6/vod-js-sdk-v6.js"></script>
  <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
  <script>
    function minDate() {
      var min = new Date();
      return (
        min.getFullYear() + "-" + (min.getMonth() + 1) + "-" + min.getDate()
      );
    }

    function maxDate() {
      var max = new Date();
      max.setDate(max.getDate() + 7);
      return (
        max.getFullYear() + "-" + (max.getMonth() + 1) + "-" + max.getDate()
      );
    }

    layui.use("laydate", function () {
      let laydate = layui.laydate;
      //执行一个laydate实例
      laydate.render({
        elem: "#schedule_time", //指定元素
        type: "datetime",
        format: "yyyy-MM-dd HH:mm",
        min: minDate(),
        max: maxDate(),
      });
    });

    layui
      .config({
        base: "/layuiadmin/", //静态资源所在路径
      })
      .extend({
        index: "lib/index", //主入口模块
      })
      .use(["index", "form", "admin", "live"], function () {
        var $ = layui.$,
          form = layui.form,
          admin = layui.admin;

        //监听直播类型
        form.on("select(categoryid)", function (data) {
          if (data.value == 100) {
            $("#pull_label").html("直播回放地址");
          } else {
            $("#pull_label").html("播流地址");
          }
          let select = $("#matchid");
          let sport_id = data.value;

          // 下拉选择置空
          select.empty();
          form.render("select");

          $("#LAY_videoSrc").val("");
          $(".sport").show();
          $(".imgy").hide();
          if (sport_id > 0) {
            $.ajax({
              url: "/admin/live/match_event",
              type: "get",
              data: { sport_id: sport_id },
              dataType: "json",
              success: function (result) {
                select.removeAttr("disabled");
                select.append(new Option("请输入赛事名称", ""));
                $.each(result.data, function (index, item) {
                  var se_title =
                    item.home +
                    "-" +
                    item.away +
                    "（比赛时间：" +
                    item.match_time_str +
                    "）";
                  select.append(new Option(se_title, item.match_id));
                });
                form.render("select");
              },
            });
          } else {
            select.append(new Option("- - -", ""));
            $(".imgy").show();
            $(".sport").hide();
            $("#matchid").attr("disabled", "disabled");
            form.render("select");
          }
        });

        form.on("submit(live-add)", function (obj) {
          //提交
          layer.load();
          admin.req({
            url: "/admin/live/add_post",
            data: obj.field,
            success: function (res) {
              layer.closeAll("loading");
              if (res.code == 0) {
                layer.msg(res.msg, { icon: 1 });
                setTimeout(function () {
                  window.location.reload();
                }, 1200);
              }
            },
            complete: function () {
              layer.closeAll("loading");
            },
          });
          return false;
        });

        function formatTimeStamp(time_stamp) {
          const time = new Date(time_stamp * 1000);
          const Y = time.getFullYear();
          const M = (time.getMonth() + 1).toString().padStart(2, "0");
          const D = time.getDate().toString().padStart(2, "0");
          const h = time.getHours().toString().padStart(2, "0");
          const m = time.getMinutes().toString().padStart(2, "0");
          return `${Y}-${M}-${D} ${h}:${m}`;
        }
      });
  </script>
  <style>
    .laydate-time-list {
      padding-bottom: 0;
      overflow: hidden;
    }

    .laydate-time-list>li {
      width: 50% !important;
    }

    .laydate-time-list>li:last-child {
      display: none;
    }
  </style>
</body>

</html>